<template>
	<div class="homeConatiner">
		<!-- 轮播图区域 -->
		<div class="lunbo">
			<my-lunbo :images="images"></my-lunbo>
		</div>
		<!-- 下部九宫格区域 -->
		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
									<span class="mui-icon mui-icon-home"></span>
									<div class="mui-media-body">新闻列表</div></router-link></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
									<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
									<div class="mui-media-body">图片分享</div></router-link></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link :to="'/productinfo/89'">
									<span class="mui-icon mui-icon-chatbubble"></span>
									<div class="mui-media-body">商品详情</div></router-link></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
									<span class="mui-icon mui-icon-location"></span>
									<div class="mui-media-body">location</div></a></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
									<span class="mui-icon mui-icon-search"></span>
									<div class="mui-media-body">Search</div></a></li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
									<span class="mui-icon mui-icon-phone"></span>
									<div class="mui-media-body">Phone</div></a></li>
			</ul> 
		</div>

	</div>
</template>
<style lang="less">
.lunbo {
  height: 200px;
  a img {
		width: 100%;
		max-height: 200px;
  }
}
</style>

<script>
import myLunbo from './commonComp/Lunbo.vue'
import Interface from '../interface.js'
export default {
  data() {
    return {
      images:[]
    };
  },
  methods: {
    getLunboInfo() {
      this.axios
        .get(Interface.getlunbo)
        .then(result => {
          console.log(result.data);
          if (result.data.status === true) {
            this.images = result.data.message;
          }
        })
        .catch(err => {
          alert(err);
        });
    }
  },
  created() {
    this.getLunboInfo();
	},
	components:{
		myLunbo
	}
};
</script>